<template>
  <div>
    <CloudPopconfirm
      title="Are you sure delete this task?"
      :visible="visible"
      ok-text="Yes"
      cancel-text="No"
      @visibleChange="handleVisibleChange"
      @confirm="confirm"
      @cancel="cancel"
    >
      <a href="#">Delete a task</a>
    </CloudPopconfirm>
    <br />
    <br />
    <div class="container">
      Whether directly execute：
      <CloudCheckbox v-model="checked" :checked="checked" @change="changeCondition" />
    </div>
  </div>
</template>
<script>

export default {
  title: '5.条件触发',
  data() {
    return {
      checked: true,
      visible: false,
      condition: true,
    };
  },
  methods: {
    changeCondition(e) {
      this.condition = e.target.checked;
    },
    confirm() {
      this.visible = false;
      this.$message.success('Next step.');
    },
    cancel() {
      this.visible = false;
      this.$message.error('Click on cancel.');
    },
    handleVisibleChange(visible) {
      if (!visible) {
        this.visible = false;
        return;
      }
      // Determining condition before show the popconfirm.
      console.log(this.condition);
      if (this.condition) {
        this.confirm(); // next step
      } else {
        this.visible = true;
      }
    },
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: start;
  align-content: center;
}
</style>